<footer class="nga-footer">
  <div class="nga-hint">
    <div class="container">
      <div class="row p-4"></div>
    </div>
  </div>
  <div class="container py-5 text-center text-lg-start">
    <div class="row">
      <div class="col-12 col-lg-5 mb-3">
        <h2 class="h5">
          <img class="mb-1 me-1" [src]="'./assets/params/images/logo/' + appInfo.logo + '-logo.png'"
            [srcset]="'./assets/params/images/logo/' + appInfo.logo + '-logo.png, ./assets/params/images/logo/' + appInfo.logo + '-logo@2x.png 2x'"
            width="25" height="25" [alt]="'Logo ' + appInfo.name">
          {{ appInfo.name }}
        </h2>
        <hr class="text-white mb-4 mt-0 d-inline-block" style="width: 120px;">
        <p>Web Application : Angular 17, Bootstrap 5</p>
        <p>Routing, Lazy Loading, SSR, PWA, SEO</p>
        <div>
          <a type="button" class="nga-btn-social nga-btn-linkedin"
            [href]="'https://www.linkedin.com/in/' + appInfo.linkedinnetwork" [attr.aria-label]="'Linkedin ' + appInfo.name">
            <i class="fab fa-linkedin-in"></i>
          </a>
          <a type="button" class="nga-btn-social nga-btn-twitter" [href]="'https://x.com/' + appInfo.xnetwork"
            [attr.aria-label]="'Twitter ' + appInfo.name">
            <i class="fab fa-twitter"></i>
          </a>
          <a type="button" class="nga-btn-social nga-btn-github" [href]="'https://github.com/' + appInfo.network"
            [attr.aria-label]="'Github ' + appInfo.name">
            <i class="fab fa-github"></i>
          </a>
          <a type="button" class="nga-btn-social nga-btn-gitlab" [href]="'https://gitlab.com/' + appInfo.network"
            [attr.aria-label]="'Gitlab ' + appInfo.name">
            <i class="fab fa-gitlab"></i>
          </a>
        </div>
      </div>
      <div class="col-6 col-lg-3 mb-3">
        <h2 class="h5">Tools</h2>
        <hr class="text-white mt-0 d-inline-block" style="width: 70px;">
        <ul class="list-unstyled">
          <li class="mb-2"><a href="https://angular.io/">Angular</a></li>
          <li class="mb-2"><a href="https://getbootstrap.com/">Bootstrap</a></li>
          <li class="mb-2"><a href="https://fontawesome.com/">Font Awesome</a></li>
        </ul>
      </div>
      <div class="col-6 col-lg-3 mb-3">
        <h2 class="h5">Learn</h2>
        <hr class="text-white mt-0 d-inline-block" style="width: 70px;">
        <ul class="list-unstyled">
          <li class="mb-2"><a [href]="'https://' + appInfo.website + '/tutorials'">Tutorials</a></li>
          <li class="mb-2"><a [href]="'https://' + appInfo.website + '/about'">About</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="py-3 text-center" style="background-color: black;">
    <div class="container">
      <a [href]="'https://' + appInfo.website">{{ appInfo.website }}</a>
    </div>
  </div>
</footer>